<script setup lang="ts">
import { ref, reactive,watch} from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage as message } from 'element-plus'
import useRouteList from './routeList'


const props = defineProps<{
	parentNode: { name: string; title: string,id:string|number}
}>()
interface routeItemType {
	name: string
	path: string
	component: string
	noNeedAuth: 1 | 0 | undefined
	title: string
	noInMenu: 1 | 0
	icon: string
	rank?: number
	noKeepAlive: 1 | 0
	affix: 1 | 0
	hiddenMenu: 1 | 0
	hiddenLayout: 1 | 0
	link:1 | 0
}
const routeItem: routeItemType = reactive({
	name: '',
	path: '',
	component: '',
	noNeedAuth: undefined,
	title: '',
	noInMenu: 0,
	icon: '',
	rank: undefined,
	noKeepAlive: 0,
	affix: 0,
	hiddenMenu: 0,
	hiddenLayout: 0,
	link:0,
})
const formInstance = ref<FormInstance | null>(null)
const routeList = useRouteList()
const formLayout = {
	style: 'margin: 0 10px',
	labelWidth: 'auto',
	labelPosition: 'left',
}

const rules = ref({
	name: [{ required: true, message: '请输入路由名！', trigger: 'change' }],
	component: [{ pattern: /^\/.*(.vue)$/, message: '组件路径必须以 / 开头，以.vue结尾！', trigger: 'change' }],
	path: [
	 {required: true, message: '请输入路由路径！', trigger: 'change' },
	 {pattern:/.*/, message: '外部链接必须以http或者https开头！', trigger: 'change' }
  ],
	title: [{ required: true, message: '请输入路由标题！', trigger: 'change' }],
})


watch(()=>routeItem.link,(v)=>{
  if(v) rules.value.path[1].pattern=/^(http | https).*/
	else rules.value.path[1].pattern=/.*/
},{immediate:true})

function init() {
	formInstance.value?.resetFields()
}

async function formCommit() {
	try {
		await formInstance.value?.validate()
		const { name: pName, title: pTitle,id} = props.parentNode
		const noNeedAuth = routeItem!.noNeedAuth ? 1 : 0
		const params={ ...routeItem, pName, pTitle, noNeedAuth,id:Math.random()+Date.now()+'_'+routeItem.name,pId:id} as routeTreeNode
		const res = await routeList.addItem(params)
		if (res.code == 200) {
			return true
		} else if (res.code == 201) message.error('路由名已存在！')
	} catch (error) {
		console.log(error)
	}
}

defineExpose({
	init,
	formCommit,
})
</script>

<template>
	<el-form :model="routeItem" :rules="rules" v-bind="formLayout" ref="formInstance">
		<el-row :gutter="24">
			<el-col :span="24">
				<el-form-item prop="name" label="路由名">
					<el-input v-model="routeItem.name" placeholder="路由名是路由id必须唯一,本地路由方案时，也作为页面的权限值" clearable />
				</el-form-item>
			</el-col>

			<el-col :span="24">
				<el-form-item prop="path" label="跳转路径">
					<el-input v-model="routeItem.path" placeholder="填符合vue-router规范的路由路径，也可以是外链" clearable />
				</el-form-item>
			</el-col>

			<el-col :span="24">
				<el-form-item prop="component" label="组件路径">
					<el-input v-model="routeItem.component" placeholder="输入的组件路径会和'@/views'拼接，有路径则为叶子节点，不能为其添加子路由" clearable />
				</el-form-item>
			</el-col>

			<el-col :span="24">
				<el-form-item prop="noNeedAuth" label="是否可无权访问">
					<el-select
						v-model="routeItem.noNeedAuth"
						placeholder="为ture则不校验所有权限"
						style="width: 100%"
						clearable
					>
						<el-option :value="1" label="是" />
						<el-option :value="0" label="否" />
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item prop="title" label="标题">
					<el-input v-model="routeItem.title" placeholder="如果存在菜单中，也将作为菜单项的标题" clearable />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item prop="noInMenu" label="是否存在菜单中">
					<el-select v-model="routeItem.noInMenu" placeholder="是否存在菜单中" clearable style="width: 100%">
						<el-option :value="1" label="否" />
						<el-option :value="0" label="是" />
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item prop="icon" label="图标">
					<el-input v-model="routeItem.icon" placeholder="图标使用的是阿里的Font class方式" clearable />
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item prop="noKeepAlive" label="是否缓存">
					<el-select v-model="routeItem.noKeepAlive" placeholder="是否缓存" clearable style="width: 100%">
						<el-option :value="1" label="否" />
						<el-option :value="0" label="是" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item prop="affix" label="是否固定到tab">
					<el-select v-model="routeItem.affix" placeholder="是否固定该页面到快捷tab导航" clearable style="width: 100%">
						<el-option :value="1" label="是" />
						<el-option :value="0" label="否" />
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item prop="hiddenMenu" label="是否隐藏菜单">
					<el-select v-model="routeItem.hiddenMenu" placeholder="跳转到该路由后，菜单不可见" clearable style="width: 100%">
						<el-option :value="1" label="是" />
						<el-option :value="0" label="否" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item prop="hiddenLayout" label="是否隐藏布局">
					<el-select v-model="routeItem.hiddenLayout" placeholder="跳转到该路由后，布局不可见" clearable style="width: 100%">
						<el-option :value="1" label="是" />
						<el-option :value="0" label="否" />
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item prop="link" label="是否跳往外部链接">
					<el-select v-model="routeItem.link" placeholder="点击菜单可以跳转到外部链接，此时path是链接地址" clearable style="width: 100%">
						<el-option :value="1" label="是" />
						<el-option :value="0" label="否" />
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :span="24">
				<el-form-item prop="rank" label="排序序号" >
					<el-input-number v-model="routeItem.rank" placeholder="如果存在菜单中，作为在菜单中的排序序号" style="width: 100%" clearable />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>
